Day 8 HTML DOM 網頁畫面操作演練(上)
教學影片來自：彭彭的課程
https://www.youtube.com/watch?v=8OejlO7N_vw&t=844s

觀念：
操作網頁畫面=操作documemt物件底下的標籤物件群

操作body物件

• body物件就表示body標籤
• body物件是document物件的一個屬性

document.body

body物件的屬性

document.body.innerHTML
document.body.className
document.body.id

操作其他標籤物件

操作步驟：

1. 取得標籤物件：藉由標籤的ID屬性建立連結。

在HTML想要操作的標籤上，加上id屬性
再於Javascript程式中利用document.queryselector()方法取得標籤物件

<div id="content">這是內容</div>
<script>
let divElement=document.queryselector("#content")
</script>

2. 操作標籤物件：操作標籤物件的HTML屬性和CSS設定。

<div id="content">這是內容</div>
<script>
let divElement=document.queryselector("#content")
divElement.innerHTML="這是新內容"; //操作標籤物件的HTML屬性
divElement.style.fontSize="30px"; //操作標籤物件的CSS設定
</script>

配合使用者點擊

讓使用者點擊後才操作HTML標籤。

在希望被點擊的標籤上，加上onclick屬性。
例：希望使用者點擊button，把字變藍色

<div id="content">這是內容</div>
<button onclick="change();">按鈕</button>
<script>
function change(){
    let divElement=document.queryselector("#content")
    divElement.style.color="blue";
</script>